<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>留言管理</span>
      </div>
    </template>

    <!-- 留言列表 -->
    <el-table :data="messageList" stripe>
      <el-table-column prop="id" label="留言ID" width="100"></el-table-column>
      <el-table-column prop="content" label="留言内容">
        <template #default="{ row }">
          <el-tooltip effect="dark" :content="row.content" placement="top">
            <div class="ellipsis-text">{{ row.content }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="留言用户" width="120">
        <template #default="{ row }">
          <span>{{ row.userName || '未知用户' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="departmentName" label="所属部门" width="120"></el-table-column>
      <el-table-column prop="createTime" label="留言时间" width="180"/>
      <el-table-column label="操作" width="120" fixed="right">
        <template #default="{ row }">
          <el-button type="danger" size="small" @click="deleteMessage(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
                   @size-change="onSizeChange"
                   @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>
  </el-card>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 分页数据
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)

// 表单数据
const addForm = reactive({
  content: '',
  departmentId: null
})

// 数据列表
const messageList = ref([
  {
    id: 1,
    content: '这是第一条留言内容',
    userId: 1,
    userName: '张三',
    departmentId: 1,
    departmentName: '技术部',
    createTime: '2025-05-15 10:00:00',
    status: 1,
    isDelete: 0
  },
  {
    id: 2,
    content: '第二条留言，反馈系统问题',
    userId: 2,
    userName: '李四',
    departmentId: 2,
    departmentName: '市场部',
    createTime: '2025-05-14 15:30:00',
    status: 1,
    isDelete: 0
  }
  // 可继续添加更多模拟数据
])

// 删除留言
const deleteMessage = (id) => {
  ElMessageBox.confirm(
    '确认删除该留言吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      // 这里模拟删除成功，实际要调用接口
      ElMessage.success('删除留言成功')
      messageList.value = messageList.value.filter(item => item.id!== id)
      total.value = messageList.value.length
    } catch (error) {
      ElMessage.error('删除留言失败，请稍后重试')
    }
  }).catch(() => {
    // 取消操作
  })
}

// 分页事件处理
const onSizeChange = (newSize) => {
  pageSize.value = newSize
  // 这里简单模拟分页数据处理，实际要调用接口
  const start = (page.value - 1) * newSize
  const end = start + newSize
  messageList.value = messageList.value.slice(start, end)
}

const onCurrentChange = (newPage) => {
  page.value = newPage
  // 这里简单模拟分页数据处理，实际要调用接口
  const start = (newPage - 1) * pageSize.value
  const end = start + pageSize.value
  messageList.value = messageList.value.slice(start, end)
}

onMounted(() => {
  total.value = messageList.value.length
})
</script>

<style scoped>
.page-container {
  min-height: 100%;
}

.ellipsis-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>